<template>
  <div class="Appointment">
    <div class="search">
      <el-radio-group
        v-model="active"
        size="small"
        @change="search"
        fill="#7b94d8"
      >
        <el-radio-button label="1">预约</el-radio-button>
        <el-radio-button label="2">私密相册</el-radio-button>
      </el-radio-group>
      <div>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button
          style="margin-left: 10px"
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >查询搜索</el-button
        >
      </div>
    </div>
    <!-- 预约 -->
    <div v-if="active == 1" v-loading="loading">
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="create_time" label="发布时间"> </el-table-column>
        <el-table-column prop="title" label="内容"> </el-table-column>
        <el-table-column prop="reason" label="附件">
          <template slot-scope="scope">
            <div class="box1" v-if="scope.row.photos.length != 0">
              <el-badge
                :value="scope.row.photos.length"
                class="item"
                type="info"
              >
                <el-image
                  style="width: 80px; height: 100px"
                  :src="scope.row.photos[0]"
                  :preview-src-list="scope.row.photos"
                >
                </el-image>
              </el-badge>
            </div>
            <div v-if="scope.row.video.length != 0">
              <!-- {{ scope.row.video }} -->
              <a
                class="el-icon-video-camera link"
                :href="scope.row.video"
                target="_blank"
              >
              </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="coin" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_del == 0" size="small" type="success"
              >正常</el-tag
            >
            <el-tag v-else size="small" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="coin" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              :disabled="scope.row.is_del == 1"
              plain
              @click="delAppointment(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 私密相册 -->
    <div v-if="active == 2">
      <!-- 相册 -->
      <div>
        <h3>
          <div><span class="tag"></span> 照片</div>
        </h3>
        <ul class="ul" v-if="imgList.length != 0">
          <li class="item" v-for="item in imgList" :key="item.id">
            <span>
              <el-image
                style="width: 100px; height: 150px"
                :src="item.link_url"
                :preview-src-list="imgArr(imgList)"
              >
              </el-image>
              <div class="mengban">
                {{ item.state == 1 ? "已审核" : "未审核" }}
              </div>
              <div class="mt-10 txt">{{ item.create_time }}</div>
              <div class="mt-10">
                <el-button
                  size="mini"
                  :disabled="item.is_del == 1"
                  @click="delimg('1', item.id)"
                  >{{ item.is_del == 0 ? "删除" : "已删除" }}</el-button
                >
              </div>
            </span>
          </li>
        </ul>
        <el-empty v-else description="空空如也"></el-empty>
        <!-- <pagination
        :total="imgTotal"
        :page.sync="imgPage"
        :limit.sync="imgPageSize"
        @pagination="imgGetList"
      /> -->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="imgPage"
          :page-size="20"
          layout="total, prev, pager, next"
          :total="imgTotal"
        >
        </el-pagination>
      </div>
      <!-- 视频 -->
      <div>
        <h3>
          <div><span class="tag"></span> 视频</div>
        </h3>
        <ul class="ul" v-if="videoList.length != 0">
          <li class="item" v-for="item in videoList" :key="item.id">
            <span>
              <video
                style="width: 100px; height: 150px"
                :src="item.link_url"
              ></video>
              <div class="mengban">
                {{ item.state == 1 ? "已审核" : "未审核" }}
              </div>
              <div class="mt-10 txt">{{ item.create_time }}</div>
              <div class="mt-10">
                <el-button
                  size="mini"
                  :disabled="item.is_del == 1"
                  @click="delimg('2', item.id)"
                  >{{ item.is_del == 0 ? "删除" : "已删除" }}</el-button
                >
              </div>
            </span>
          </li>
        </ul>
        <el-empty v-else description="空空如也"></el-empty>
        <!-- <pagination
        :total="imgTotal"
        :page.sync="imgPage"
        :limit.sync="imgPageSize"
        @pagination="imgGetList"
      /> -->
        <el-pagination
          background
          @current-change="handleCurrentChange1"
          :current-page.sync="videPage"
          :page-size="20"
          layout="total, prev, pager, next"
          :total="videoTotal"
        >
        </el-pagination>
      </div>
      <!-- 语音 -->
      <div>
        <h3>
          <div><span class="tag"></span> 语音标签</div>
        </h3>
        <ul class="ul" v-if="audioList.length != 0">
          <li class="item" v-for="item in audioList" :key="item.id">
            <span>
              <audio controls style="width: 100px" :src="item.link_url">
                不支持
              </audio>
              <div class="mt-10">
                {{ item.state == 1 ? "已审核" : "未审核" }}
              </div>
              <div class="mt-10 txt">{{ item.create_time }}</div>
              <div class="mt-10">
                <el-button
                  size="mini"
                  :disabled="item.is_del == 1"
                  @click="delimg('3', item.id)"
                  >{{ item.is_del == 0 ? "删除" : "已删除" }}</el-button
                >
              </div>
            </span>
          </li>
        </ul>
        <el-empty v-else description="空空如也"></el-empty>
        <!-- <pagination
        :total="imgTotal"
        :page.sync="imgPage"
        :limit.sync="imgPageSize"
        @pagination="imgGetList"
      /> -->
        <el-pagination
          background
          @current-change="handleCurrentChange2"
          :current-page.sync="audioPage"
          :page-size="20"
          layout="total, prev, pager, next"
          :total="audioTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  adminEngageEngageList,
  adminEngageDelEngage,
  userPrivatePhoto,
  userPrivatePhotoDel,
} from "@/api/UserManagement";
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  props: ["userId"],
  data() {
    return {
      loading: false,
      active: "2",
      timeArr: [],
      startTime: "",
      endTime: "",
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      //私密相册
      //图片
      imgList: [],
      imgTotal: 0,
      imgPage: 1,
      //视频
      videoList: [],
      videoTotal: 0,
      videoPage: 1,
      //语音audio
      audioList: [],
      audioTotal: 0,
      audioPage: 1,
    };
  },
  methods: {
    search() {
      this.page = 1;
      this.getList();
    },
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArr[0];
      this.endTime = this.timeArr[1];
    },
    getList() {
      if (this.userId) {
        switch (this.active) {
          case "1":
            this.adminEngageEngageList();
            break;
          case "2":
            this.imgGetList();
            this.videoGetList();
            this.audioGetList();
        }
      }
    },
    //获取预约列表
    async adminEngageEngageList() {
      this.loading = true;
      const res = await adminEngageEngageList({
        user_id: this.userId,
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.page,
        pageSize: this.pageSize,
      });
      this.loading = false;
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.total = parseInt(res.data.total);
      }
    },
    //删除预约
    delAppointment(id) {
      this.$confirm("是否删除该预约?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await adminEngageDelEngage({ id });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //获取照片
    async imgGetList() {
      const res = await userPrivatePhoto({
        user_id: this.userId,
        type: 1,
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.imgPage,
        pageSize: 20,
      });
      if (res.code == 0) {
        this.imgList = res.data.list;
        this.imgTotal = parseInt(res.data.count);
      }
    },
    handleCurrentChange(page) {
      this.imgPage = page;
      this.imgGetList();
    },
    handleCurrentChange1(page) {
      this.videoPage = page;
      //   this.imgGetList();
    },
    handleCurrentChange2(page) {
      this.audioPage = page;
      //   this.imgGetList();
    },
    //获取视频
    async videoGetList() {
      const res = await userPrivatePhoto({
        user_id: this.userId,
        type: 2,
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.videoPage,
        pageSize: 20,
      });
      if (res.code == 0) {
        this.videoList = res.data.list;
        this.videoTotal = parseInt(res.data.count);
      }
    },
    //获取语音
    async audioGetList() {
      const res = await userPrivatePhoto({
        user_id: this.userId,
        type: 3,
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.videoPage,
        pageSize: 20,
      });
      if (res.code == 0) {
        this.audioList = res.data.list;
        this.audioTotal = parseInt(res.data.count);
      }
    },
    //删除
    delimg(type, id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userPrivatePhotoDel({
            user_id: this.userId,
            type,
            id,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  computed: {
    imgArr() {
      return (list) => {
        return list.map((item) => {
          return item.link_url;
        });
      };
    },
  },
};
</script>

<style lang="less" scoped>
.Appointment {
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .box1 {
    padding-top: 10px;
  }
  .link {
    display: inline-block;
    width: 80px;
    height: 100px;
    border: 1px dashed #ccc;
    font-size: 50px;
    line-height: 100px;
  }
  h3 {
    margin: 20px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
      .tag {
        display: inline-block;
        width: 5px;
        height: 18px;
        background-color: #7b94d8;
        margin-right: 10px;
      }
    }
  }
  .ul {
    display: flex;
    flex-wrap: wrap;
    .item {
      list-style: none;
      display: inline-block;
      width: 10%;
      margin-bottom: 10px;
      text-align: center;
      span {
        position: relative;
        .mengban {
          position: absolute;
          bottom: 2px;
          left: 0;
          width: 100%;
          height: 30px;
          line-height: 30px;
          background: black;
          color: #fff;
          opacity: 0.6;
        }
        .mt-10 {
          margin-top: 10px;
        }
        .txt {
          font-size: 10px;
        }
      }
    }
  }
}
</style>